<template>
  <section class="app-inner">
    <el-card class="header-card card-flex">
      <!--      <el-button type="primary" @click="addSchoolInfo()">新增学校</el-button>-->
      <el-button v-if="checkAuthority('/school/download')" type="primary" @click="downloadTemplate">下载模板</el-button>
      <el-upload style="display: inline; margin-left: 10px" action="none" :http-request="see" :show-file-list="false">
        <el-button v-if="checkAuthority('/school/save')" type="primary">EXCEL导入</el-button>
      </el-upload>
      <el-button v-if="checkAuthority('/school/export')" type="primary" @click="exportSchool" style="margin-left: 10px">导出学校信息</el-button>
      <el-button v-if="checkAuthority('/school/exportall')" type="primary" @click="exportSchoolByUrl">导出学校全部信息</el-button>
      <div v-if="checkAuthority('/eyes')" class="switch-btn cursor iconfont" :class="[isShow ? 'icon-biyan': 'icon-yanjing']" @click="handleClickIsShow"></div>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="unicode" label="学校编号" align="center" />
        <el-table-column prop="name" label="学校名称" align="center" />
        <el-table-column prop="address" label="学校地址" align="center" />
        <el-table-column prop="contact" label="联系人" align="center" />
        <el-table-column prop="contactWay" label="联系方式" align="center" >
          <template v-slot='{row}'>
            {{ !isShow ? $options.filters.cellularPhone(row.contactWay) : row.contactWay || '--' }}
            <!-- {{row.contactWay |cellularPhone}} -->
          </template>
        </el-table-column>
        <el-table-column prop="isDistrict" label="是否有分校区" align="center">
          <template slot-scope="scope">
            {{
                scope.row.isDistrict === 1
                  ? '是'
                  : '否'
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" align="center" /> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="checkAuthority('/select')" @click.native.prevent="infoSeeing(scope.row)" type="text" size="small">查看</el-button>
            <el-button v-if="checkAuthority('/editor')" @click.native.prevent="infoEdit(scope.row)" type="text" size="small">编辑</el-button>
            <!--            <el-button @click.native.prevent="infoDel(scope.row)" type="text" size="small">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="total, prev, pager, next" @current-change="pageHandleChange" :current-page="currentPage"
        :total="totalPageNum"></el-pagination>
    </el-card>
    <addSchoolInfo :addSchoolForm="addSchoolForm" :data="addSchoolFormData"
      @closeAddSchoolForm="addSchoolForm.flag = false; getAllList()" />
    <schoolInfoForm :schoolForm="schoolForm" :data="schoolFormData"
      @closeSchoolForm="schoolForm.flag = false; getAllList()" />
  </section>
</template>

<script>
import { decrypt } from '@/utils/crypto'
import schoolInfoForm from './components/schoolInfoForm'
import addSchoolInfo from './components/addSchoolInfo'
import { downloadTemplate, getAllList, importSchoolInfo, getSepSchool, exportSchoolByUrl, exportSchool } from '@/views/children/basic/js/schoolInfo'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  name: 'schoolInfo',
  components: {
    schoolInfoForm,
    addSchoolInfo
  },
  data () {
    return {
      pageSize: 10,
      currentPage: 1,
      totalPageNum: 1,
      // 查看学校
      schoolForm: {
        flag: false,
        title: ''
      },
      schoolFormData: {},
      addSchoolFormData: {},
      // 新增学校传值
      addSchoolForm: {
        flag: false,
        title: ''
      },
      // 所有学校列表数据
      tableData: [],
      // 表头信息 添加width可设置单元格宽度
      columns: [
        { label: '学校编号', prop: 'unicode' }, { label: '学校名称', prop: 'name' },
        { label: '学校地址', prop: 'address' }, { label: '联系人', prop: 'contact' }, { label: '联系方式', prop: 'contactWay' },
        { label: '是否有分校区', prop: 'isDistrict' }
      ],
      isShow: false
    }
  },
  methods: {
    checkAuthority,
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    // 下载模板
    downloadTemplate () {
      downloadTemplate()
    },
    // EXCEL导入
    importExcel (e) {
      console.log(e)
      // importSchoolInfo({file:e.file}).then((res) => {
      //   this.$message.success('导入成功')
      // })
    },
    // 导入前的验证
    beforeUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        return false
      } else if (!isLt2M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        return false
      } else {
        return true
      }
    },
    // 新增学校
    addSchoolInfo () {
      this.addSchoolForm.flag = true
      this.addSchoolForm.title = '新增学校信息'
      this.addSchoolFormData = {}
    },
    // 查看学校信息
    async infoSeeing (data) {
      let params = {
        name: data.name,
        no: data.no
      }
      await getSepSchool(params).then(res => {
        res.data = JSON.parse(decrypt(res.data))
        this.schoolForm.flag = true
        this.schoolForm.title = data.name
        this.schoolFormData = res.data
      })
    },
    // 编辑学校信息
    infoEdit (data) {
      let params = {
        name: data.name,
        no: data.no
      }
      getSepSchool(params).then(res => {
        res.data = JSON.parse(decrypt(res.data))
        this.addSchoolForm.flag = true
        this.addSchoolForm.title = data.name
        this.addSchoolFormData = res.data
      })
    },
    // 删除当前行的学校信息
    infoDel (row) {
      this.$confirm('此操作将删除该学校信息 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

      })
    },
    // 分页
    pageHandleChange (page) {
      this.currentPage = page
    },
    getAllList () {
      getAllList().then(res => {
        this.tableData = res.data
        this.totalPageNum = 1
      })
    },
    // 导出信息
    exportSchool () {
      let params = {
        no: this.tableData[0].no
      }
      exportSchool(params).then(res => {
        if (res.code === 0) {
          this.$message.success('导出成功')
        }
      })
    },
    // 导出全部信息
    exportSchoolByUrl () {
      let params = {
        no: this.tableData[0].no
      }
      exportSchoolByUrl(params).then(res => {
        if (res.code === 0) {
          this.$message.success('导出成功')
        }
      })
    },
    see (file, fileList) {
      let headFile = file.file
      let formData = new FormData()
      formData.append('file', headFile)
      importSchoolInfo(formData).then((res) => {
        this.$message.success('导入成功')
        this.getAllList()
      })
    }
  },
  mounted () {
    this.getAllList()
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .header-card {
    margin-bottom: 10px;
  }

  .el-pagination {
    text-align: center;
    display: block;
    margin: 10px auto;
  }
}
</style>
